<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>新建日记</title>
    <link rel="icon" href="pic/favicon.ico" type="image/x-icon">
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            background-image: url('./pic/绿色.png'); /* 替换为你的背景图路径 */
            background-size: cover; /* 背景图覆盖整个页面 */
            background-position: center; /* 背景图居中 */
            background-attachment: fixed; /* 背景图固定 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 容器样式 */
        .container {
            width: 100%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
            opacity: 0.8; /* 透明度 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 15px;
        }

        /* 标签样式 */
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333; /* 标签文字颜色 */
        }

        /* 输入框和文本域样式 */
        input[type="text"], textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            background-color: #f9f9f9; /* 输入框背景色 */
        }

        textarea {
            height: 250px; /* 拉长日记内容文本框 */
            resize: vertical;
        }

        /* 按钮容器样式 */
        .button-container {
            display: flex;
            justify-content: flex-end; /* 将按钮放在右侧 */
            margin-top: 20px;
        }

        /* 按钮样式 */
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease; /* 按钮 hover 动画 */
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <h1>新建日记</h1>
    <form @submit.prevent="submitDiary">
        <div class="form-group">
            <label for="title">日记标题</label>
            <input type="text" id="title" v-model="diary.title" required>
        </div>
        <div class="form-group">
            <label for="diary_body">日记内容</label>
            <textarea id="diary_body" v-model="diary.diary_body" required></textarea>
        </div>
        <div class="form-group">
            <label for="label">标签</label>
            <select id="label" v-model="diary.label" required>
                <option value="">请选择日记类型</option>
                <option value="生活日记">生活日记</option>
                <option value="旅行日记">旅行日记</option>
                <option value="学习日记">学习日记</option>
            </select>
        </div>
        <div class="button-container">
            <button type="submit">提交</button>
        </div>
    </form>
</div>

<script>
    const app = {
        data() {
            return {
                diary: {
                    title: '',
                    diary_body: '',
                    label: '', // 标签改为下拉菜单选项
                    date_time: '',
                    life_state: '0'
                }
            };
        },
        // 方法
        methods: {
            // 提交日记的请求
            async submitDiary() {
                // 获取当前时间
                const now = new Date();
                const beijingTime = new Date(now.getTime() + 8 * 60 * 60 * 1000); // 转换为北京时间
                this.diary.date_time = beijingTime.toISOString().slice(0, 19).replace('T', ' ');
                console.log('当前北京时间:', this.diary.date_time);

                // 获取当前用户 ID（假设从 localStorage 中获取）
                const user = JSON.parse(localStorage.getItem('user'));
                if (user) {
                    this.diary.user_id = user.id;
                } else {
                    alert('用户未登录，请先登录');
                    window.location.href = 'login.html';
                    return;
                }

                // 发送请求
                axios({
                    method: 'post',
                    url: '/diary/insert',
                    data: {
                        title: this.diary.title,
                        diary_body: this.diary.diary_body, // 使用 diary_body 作为字段名
                        label: this.diary.label, // 使用下拉菜单的值
                        date_time: this.diary.date_time,
                        life_state: this.diary.life_state
                    }
                }).then((response) => {
                    if (response.data.success) {
                        alert('日记提交成功');
                        window.location.href = 'index.html'; // 跳转到 index.html 页面
                    } else {
                        alert('日记提交失败: ' + response.data.message);
                    }
                });
            }
        },
        // 构造
        mounted() {
            console.log("Vue 启动成功！");
        }
    };

    // 启动
    Vue.createApp(app).mount("#app");
</script>
</body>
</html>